<%@ page import="com.example.entity.User" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="com.example.utils.DButil" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="com.example.dao.impl.UserDaoimpl" %>
<%@ page import="com.example.entity.UserImage" %>
<%@ page import="com.example.entity.UserName" %>
<%@ page import="com.example.controller.LoginServlet" %>
<%@ page import="com.example.controller.MessageServlet" %>
<%@ page import="java.sql.Connection" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>编辑资料</title>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'><!-- 图标 -->

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
            href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
            rel="stylesheet">
    <link rel="stylesheet" href="./css/移动端页面功能.css">
</head>
<style>
    * {
        box-sizing: border-box;
    }

    img {
        width: 50px;
        height: 50px;
        object-fit: cover;
    }

    .EditorTd {
        display: flex;
        justify-content: left;
    }

    p {
        margin: 0px;
        padding: 0px;
        padding-left: 20px;
    }

    b {
        position: absolute;
        right: 10px;
    }

    .s {
        cursor: pointer;
    }


    h2 {
        margin-left: 0px;
        padding-left: 0px;
    }

    .duihua {
        display: none;
        /*background-color: #fff;*/
    }

    .duihua h1 {
        margin: 0px;
        text-align: center;
    }

    .duihua .input {
        display: flex;
        background-color: #f8f9fa;
        width: 100%;
        height: 6%;

        align-items: center;
        justify-content: center;
        transform: translateY(-14px);
    }

    .duihua .input input[type="text"] {
        width: 80%;
        height: 40px;
        margin-right: 20px;
    }

    .duihua .input button {
        border-radius: 3px;
        border: 0px;
        background-color: #000;
        color: #fff;
        height: 40px;
    }

    .duihua .text {
        padding-top: 20px;
        width: 100%;
        height: 90vh;
        background-color: #f8f9fa;
        padding-bottom: 20px;
        overflow: scroll;


    }

    .duihua .text p {
        display: flex;
        height: 50px;
        background-color: #fff;
        padding-left: 0px;
        border: 1px solid #000;
        border-radius: 10px;
        align-items: center;

    }

    .duihua .text .right {
        display: flex;
        padding-left: 0px;
        justify-content: flex-end;
        /* 添加这一行来使内容靠右对齐 */
        align-items: center;
        /* 保持垂直居中 */
    }

    .duihua .text .right chat-bubble {
        margin-right: 0px;
    }

    .duihua .text .left {
        display: flex;
        padding-left: 0px;

        justify-content: flex-start;
        /* 添加这一行来使内容靠右对齐 */
        align-items: center;
        /* 保持垂直居中 */
    }

    .duihua .text .left chat-bubble {
        margin-left: 20px;
    }


    /* 聊天气泡公共样式 */
    .chat-bubble {
        padding: 10px 5px 10px;
        /* border-radius: 25px; */
        max-width: 80%;
        /* margin-bottom: 10px; */
        font-size: 16px;
        line-height: 1.5;
        position: relative;
    }

    /* 左边对齐的聊天气泡 */
    .chat-bubble.left {
        background-color: #e6e6e6;
        float: left;
        margin-left: 10px; /* 根据需要调整边距 */
        text-align: right;
        padding-left: 5px !important;
    }

    /* 右边对齐的聊天气泡 */
    .chat-bubble.right {
        background-color: #007bff;
        color: white;
        float: right;
        margin-right: 10px; /* 根据需要调整边距 */
        padding-left: 5px !important;
    }

    /* 聊天气泡尾部 */
    .chat-bubble::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 0;
        height: 0;
        border-style: solid;
    }

    /* 左边对齐聊天气泡的尾部 */
    .chat-bubble.left::before {
        left: -12px;
        border-width: 12px 12px 12px 0;
        border-color: transparent #e6e6e6 transparent transparent;

        transform: translate(4px, -10px);

    }

    /* 右边对齐聊天气泡的尾部 */
    .chat-bubble.right::before {
        right: -12px;
        border-width: 12px 0 12px 12px;
        border-color: transparent transparent transparent #007bff;

        transform: translate(-4px, -10px);

    }
</style>
<body>
<header>
    <h2 style="text-align: center;">消息</h2>
</header>
<table>
    <%
        User user = (User) request.getSession().getAttribute("user");
        int right = user.getUserId();
        int left = 0;

        PreparedStatement ps = null;


        ResultSet rs = null;
        Connection con = DButil.getConnection();

        String date = null;
        String content = null;
        try {
//            ps = DButil.getPreparedStatement("select * from liaotian where USERID1 = ? AND USERID2 = ? or USERID2 = ? AND USERID1 = ?");
            ps = con.prepareStatement("select * from liaotian where USERID1 = ? GROUP BY USERID2");
            ps.setInt(1, right);
            rs = ps.executeQuery();
            UserImage userImage = null;
            UserDaoimpl userDaoimpl = new UserDaoimpl();

            while (rs.next()) {
                left = rs.getInt("USERID2");
                userImage = userDaoimpl.findByUserID(left);//对话头像
                date = rs.getString("DATE");
                content = rs.getString("CONTENT");

                out.print("<tr>");
                out.print("<td class='EditorTd'>");
                out.print("<img src=" + userImage.getUserImage() + " alt='' />");
                out.print("<div class='s'>");
                out.print("<p style='font-weight: bold;'>" + userImage.getUsername() + "</p>");
//                out.print("<p>" + content + "</p>");
                out.print("</div>");
                out.print("<b style='font-size:12px'>" + date + "</b>");
                out.print("<hr>");
                out.print("</td>");
                out.print("</tr>");
            }
        } catch (SQLException e) {
            throw new RuntimeException(e);
        } finally {
            DButil.closeResources(rs,ps,con);
        }
    %>
</table>
<div class="duihua">
    <h1></h1>

    <div class="text">
<%--        <%--%>
<%--            if (session.getAttribute("touserid") != null){--%>
<%--                PreparedStatement ps1 = null;--%>
<%--                ResultSet rs1 = null;--%>

<%--                left = (int) LoginServlet.session.getAttribute("touserid");--%>
<%--                UserImage userImage = null;--%>
<%--                UserDaoimpl userDaoimpl = new UserDaoimpl();--%>
<%--                userImage = userDaoimpl.findByUserID(left);//对话头像--%>
<%--                String sql = "select * from liaotian where USERID1 = ? AND USERID2 = ? or USERID2 = ? AND USERID1 = ? ORDER BY DATE";--%>
<%--                try {--%>
<%--                    ps1 = con.prepareStatement(sql);--%>
<%--                    ps1.setInt(1, right);--%>
<%--                    ps1.setInt(2, left);--%>
<%--                    ps1.setInt(3, right);--%>
<%--                    ps1.setInt(4, left);--%>
<%--                    rs1 = ps1.executeQuery();--%>
<%--                    while (rs1.next()) {--%>
<%--                        String content1 = rs1.getString("CONTENT");--%>
<%--                        String className = (rs1.getInt("USERID1") == left) ? "left" : "right";--%>
<%--                        String userImageSrc = (rs1.getInt("USERID1") == left) ? userImage.getUserImage() : user.getUserimg();--%>

<%--                        out.print("<div class='" + className + "'>");--%>

<%--                        // 根据className决定头像的位置--%>
<%--                        if (className.equals("left")) {--%>
<%--                            out.print("<img src='" + userImageSrc + "' alt='' />");--%>
<%--                        }--%>
<%--                        out.print("<div class='chat-bubble " + className + "'>" + content1 + "</div>");--%>

<%--                        if (className.equals("right")) {--%>
<%--                            out.print("<img src='" + userImageSrc + "' alt='' />");--%>
<%--                        }--%>

<%--                        out.print("</div>");--%>
<%--                    }--%>
<%--                } catch (SQLException e) {--%>
<%--                    throw new RuntimeException(e);--%>
<%--                }finally {--%>
<%--                    DButil.closeResources(rs1,ps1,con);--%>
<%--                }--%>
<%--            }--%>
<%--        %>--%>
    </div>

</div>
</body>
<script src="./js/jquery.min.js"></script>
<script>
    // var usernames = [];
    // for (var i = 0; i < list.length; i++) {
    //     usernames.push(list[i].querySelector('p').textContent);
    // }

    const list = document.querySelectorAll('.s');
    let number;
    list.forEach((item, i) => {
        item.addEventListener('click', function() {
            number = i;
            const username = item.querySelector('p').textContent;

            // 发送 AJAX 请求
            $.ajax({
                url: "text.jsp",
                type: "POST",
                data: { username: username },
                success: function(response) {
                    console.log("Chat loaded successfully");
                    // 更新对话框
                    const duihua = document.querySelector('.duihua');
                    duihua.querySelector('h1').textContent = username;
                    duihua.style.display = "block";

                    const iframe = document.createElement('iframe');
                    iframe.src = "text.jsp?username=" + username;
                    iframe.frameBorder = "0";
                    iframe.style.width = "100%";
                    iframe.style.height = "80vh";

                    const text = duihua.querySelector('.text');
                    text.innerHTML = ''; // 清空已有内容，避免重复插入
                    text.appendChild(iframe);
                },
            });

            // 隐藏 header 和 table
            document.querySelector('header').style.display = "none";
            document.querySelector('table').style.display = "none";
        });
    });





</script>
</html>

